<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./axios.js"></script>
</head>

<body>
    <h1>复习ajax 和 axios 的使用</h1>
    <script>
        // 接口文档：
        // 链接:    
        // 访问密码: nXLy9Tsf
        // 接口根路径：http://124.223.14.236:3001/api

        // 需求：原生ajax 代码  实现获取 获取菜单列表
        const xhr = new XMLHttpRequest()
        xhr.open('get', 'http://124.223.14.236:3001/api/recipe')
        xhr.send()
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                console.log(JSON.parse(xhr.response));
            }
        }


        // 需求：axios 实现获取 获取菜单列表
        // 查阅文档：http://www.axios-js.com/
        // 设置请求根路径
        axios.defaults.baseURL = 'http://124.223.14.236:3001/api'
        axios({
            // method: 'GET', //请求反倒是 默认发送get请求方式
            url: '/recipe',
            // 如果请求方式是get，参数用params传递。如果请求方式是post，参数用data传递
            params: {
                pageNum: 2,
                pageSize: 5
            }
        }).then(({ data: res }) => {
            console.log(res.data);
        })

        // 需求：axios 实现 注册功能
        // axios({
        //     method: 'post',
        //     url: '/user/reg',
        //     data: {
        //         username: 'chuan',
        //         password: '123123',
        //         phone: '15651112858',
        //         sex: 1,
        //         vip: 1,
        //         question: '怎么了',
        //         answer: '难受'
        //     }
        // }).then(({ data }) => {
        //     console.log(data);
        // })
        axios({
            method: 'post',
            url: '/user/reg',
            data: {
                username: 'aaa',
                password: '123',
                phone: '13246579821',
                sex: 1,
                vip: 1,
                question: '你是谁',
                answer: '欧文'
            }
        }).then(({ data }) => {
            console.log(data);
        })

        // 需求：axios 实现 登录功能
        // axios.post('/user/login', {
        //     username: 'aaa',
        //     password: '123'
        // }).then(({ data }) => {1
        //     console.log(data);
        // })

        // 重点 - axios 优化代码
        // axios。post（）可以使用then方法说明axios。post（）结果是promise实例对象
        async function fn() {
            const { data } = await axios.post('/user/login', {
                username: 'aaa',
                password: '123'
            })
            console.log(data);
        }
        fn()
    </script>
</body>

</html>